<template>
  <div>
    <!-- <el-row class="search mb-[15px]" :gutter="10">
        <el-select v-model="searchForm.store_id" placeholder="请选择门店" filterable @change="handleStoreChange"  style="width: 280px;"  >
            <el-option v-for="item in storeList" :key="item.id" :label="item.title" :value="item.id"></el-option>
        </el-select>
    </el-row> -->
    <el-row v-if="detail" class="mb-[15px]" :gutter="10">
        <!-- <el-col :span="6">
            <el-card class="text-center" shadow="hover">
                <div class="text-[30px] font-bold">{{ Number(detail.money).toFixed(2) }}</div>
                <div class="text-[#999]">可用额度(元)</div>
            </el-card>
        </el-col> -->
        <el-col :span="8">
            <el-card class="text-center" shadow="hover">
                <div class="text-[30px] font-bold">{{ Number(detail.chongzhi).toFixed(2) }}</div>
                <div class="text-[#999]">总充值金额(元)</div>
            </el-card>
        </el-col>
        <el-col :span="8">
            <el-card class="text-center" shadow="hover">
                <div class="text-[30px] font-bold">{{ Number(detail.hongbao).toFixed(2) }}</div>
                <div class="text-[#999]">已消耗额度(元)</div>
            </el-card>
        </el-col>
        <el-col :span="8">
            <el-card class="text-center" shadow="hover">
                <div class="text-[30px] font-bold">{{ Number(detail.commisson).toFixed(2) }}</div>
                <div class="text-[#999]">门店总金额(元)</div>
            </el-card>
        </el-col>
    </el-row>
    <!-- <el-button class="mb-[15px]" type="primary">额度充值</el-button> -->
    <div class="content">
      <el-tabs v-model="active" class="pl-[15px]">
        <el-tab-pane label="门店资金明细" name="1">
          <f-table ref="tableRef1" @register="table1.register">
            <template #type="scoped">
                <el-tag v-if="scoped.row.type=='chongzhi'">充值</el-tag>
                <el-tag v-if="scoped.row.type=='hongbao'" type="success">红包</el-tag>
                <el-tag v-if="scoped.row.type=='commission'" type="warning">分销</el-tag>
                <el-tag v-if="scoped.row.type=='zhuanchu'" type="success">转出</el-tag>
                <el-tag v-if="scoped.row.type=='zhuanru'" type="warning">转入</el-tag>
            </template>
          </f-table>
        </el-tab-pane>
        <!-- <el-tab-pane label="额度消耗明细" name="2">
          <f-table ref="tableRef2" @register="table2.register">
          </f-table>
        </el-tab-pane> -->
      </el-tabs>
      <!-- 列表 -->
    </div>
</div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { t } from '@/lang'
import FTable, { BasicColumn, useTable } from '@/addon/htscrm/components/f-table'
import { tableColumns, tableColumns2 } from '@/addon/htscrm/data/store.recharge'
import { getStoreAllApi, getStoreMoneyLogApi } from '@/addon/htscrm/api'

const detail = ref<any>()
const active = ref('1')
const storeList = ref<IStoreItem[]>([])
const searchForm = ref({
    store_id: 0
})

const tableRef1 = ref()
const table1 = useTable({
    rowKey: 'id',
    hideTableHeader: true,
    columns: tableColumns(t) as BasicColumn<any>[],
    api: async (opt) => {
        opt.store_id = searchForm.value.store_id
        const { list, sum_info: sumInfo } = (await getStoreMoneyLogApi(opt)).data
        detail.value = sumInfo
        return list
    }
})
const table2 = useTable({
    rowKey: 'id',
    hideTableHeader: true,
    columns: tableColumns2(t) as BasicColumn<any>[],
    api: async (opt) => {
        opt.store_id = searchForm.value.store_id
        const { list, sum_info: sumInfo } = (await getStoreMoneyLogApi(opt)).data
        detail.value = sumInfo
        return list
    }
})
async function getStoreList () {
    const res = await getStoreAllApi()
    storeList.value = [{ id: 0, title: '全部门店' } as any, ...res.data]
}

function handleStoreChange () {
    table1.methods.reload()
    table2.methods.reload()
}

onMounted(() => {
    getStoreList()
})

</script>

<style lang="scss" scoped>
.content {
  background-color: var(--el-bg-color);
}
</style>
